<template>
  <!--
     读卡 读不到只能新建 所以输入没有必要
     读卡  读到了  就只能修改了
     所以输入是没有必要的
-->
  <div class="addUpdate">
    <ViewTitle text="基础信息" />
    <div class="box1">
      <div class="yisheng">
        <span>病人姓名:</span>
        <el-input
          size="mini"
          :value="chargeData.member.name"
          disabled
        ></el-input>
      </div>
      <div>
        <span>卡号:</span>
        <el-input
          size="mini"
          disabled
          :value="chargeData.member.id_card"
          placeholder="请输入卡号"
        ></el-input>
      </div>
      <div>
        <span>门诊号:</span>
        <el-input
          size="mini"
          disabled
          :value="chargeData.patient_no"
        ></el-input>
      </div>
    </div>
    <ViewTitle text="收费明细" v-if="chargeDataArry.length > 0" />
    <div class="box3" v-if="chargeDataArry.length > 0">
      <table width="100%">
        <el-table
          border
          width="100%"
          height="250"
          disabled
          :data="chargeDataArry"
          @selection-change="checkedChange"
        >
          <el-table-column
            v-if="thatF.dialogTitle == '退费'"
            type="selection"
            :selectable="checkSelectable"
            width="55"
          >
          </el-table-column>
          <template v-for="(item, index) in tableData">
            <el-table-column
              :width="item.width"
              :prop="item.prop"
              :label="item.label"
              :key="index"
            ></el-table-column>
          </template>
        </el-table>
      </table>
    </div>
    <ViewTitle text="收费信息" v-if="thatF.dialogTitle == '收费'" />

    <div
      class="box1"
      style="padding-top: 10px"
      v-if="thatF.dialogTitle == '收费'"
    >
      <div>
        <span>应收:</span>
        <el-input
          size="mini"
          disabled
          v-model="chargeData.should_amount"
          placeholder="请输入"
        ></el-input>
      </div>
      <div>
        <span>实收:</span>
        <el-input
          size="mini"
          disabled
          v-model="chargeData.amount"
          placeholder="请输入"
        ></el-input>
      </div>
      <div>
        <span>抹零:</span>
        <el-input
          size="mini"
          disabled
          v-model="chargeData.erase_amount"
          placeholder="请输入"
        ></el-input>
      </div>

      <div>
        <span>找零:</span>
        <el-input
          size="mini"
          disabled
          v-model="chargeData.give_amount"
          placeholder="请输入"
        ></el-input>
      </div>

      <div>
        <span>收银:</span>
        <el-input
          size="mini"
          disabled
          v-model="chargeData.collect_amount"
          placeholder="请输入"
        ></el-input>
      </div>
      <!-- <div>
      <span>收款方式:</span>

       <el-select size="mini" v-model="$baseBai['payment'][chargeData.payment].label" placeholder="请选择支付方式">
        <el-option
          v-for="(item, index) in $baseBai['payment']"
          :key="'4' + index"
          :label="item.label"
          :value="item.value"

        >
        </el-option>
      </el-select>
    </div> -->
    </div>
    <ViewTitle text="支付方式：" v-if="thatF.dialogTitle == '收费'" />
    <div style="margin-top: 20px" v-if="thatF.dialogTitle == '收费'">
      <el-table
        border
        :data="paymentArry"
        @selection-change="handleSelectionChange"
        style="width: 100%" 
      >
        <el-table-column type="index" width="50" label="序号">
        </el-table-column>
        <el-table-column prop="label" label="支付方式" width="100">
        </el-table-column>
        <el-table-column prop="price" label="金额" width="400">
          <template slot-scope="scope">
            <el-input-number
              @input="changePricePay(paymentArry, scope.row)"
              
              v-model="scope.row.price"
              :min="0" 
             
              :precision="2"
              :step="0.1" 
            ></el-input-number>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <ViewTitle
      :text="'退费金额：' + back_amount+'元'"
      v-if="thatF.dialogTitle == '退费'"
    />
    <ViewTitle
      text="支付方式："
      v-if="thatF.dialogTitle == '明细' && thatF.thatF.pay_status != 3"
    />
    <ViewTitle
      :text="'退费方式：' + back_amount+'元'"
      v-if="thatF.dialogTitle == '明细' && thatF.thatF.pay_status == 3"
    />
    <div
      style="margin-top: 20px"
      v-if="
        (thatF.dialogTitle == '退费' || thatF.dialogTitle == '明细') &&
        thatF.thatF.pay_status != 3
      "
    >
      <el-table
        v-if="thatF.dialogTitle != '退费'"
        border
        :data="paymentArry"
        @selection-change="handleSelectionChange"
        style="width: 100%"
      >
        <el-table-column type="index" width="50" label="序号">
        </el-table-column>
        <el-table-column
          v-if="thatF.dialogTitle == '退费'"
          prop="label"
          label="退费方式"
          width="100"
        >
        </el-table-column>
        <el-table-column
          v-if="thatF.dialogTitle == '明细'"
          prop="label"
          label="支付方式"
          width="100"
        >
        </el-table-column>
        <el-table-column prop="price" label="金额" width="400">
          <template slot-scope="scope">
            <span>{{ scope.row.price }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div
      style="text-align: center; margin-top: 20px"
      v-if="thatF.dialogTitle == '收费'"
    >
      <el-button type="success" style="width: 200px" @click="save()"
        >收费</el-button
      >
      <el-button type="success" style="width: 200px" @click="handleEdit()"
        >打印收费单</el-button
      >
    </div>
    <div
      style="text-align: center; margin-top: 20px"
      v-if="thatF.dialogTitle == '退费'"
    >
      <el-button type="success" style="width: 200px" @click="tuifei()"
        >退费</el-button
      >
    </div>
  </div>
</template>
<script>
import ViewTitle from "@/forComponents/viewTitle/index.vue";

export default {
  props: ["chargeDataArry", "chargeData", "thatF"],
  data() {
    return {
      paymentArry: [],
      back_amount: 0,
      params: {
        payment: [],
      },
      subRefund: [], //退费需要的参数

      tableData: [],
    };
  },
  watch: {
    subRefund(newData) {
      this.back_amount = 0;
     // console.log("newData", newData);
      newData.forEach((v) => {
       this.back_amount = (this.back_amount + parseFloat(v.amount));
      // this.back_amount=(103.04+222.60+520.30).toFixed(2);
      });
      this.back_amount = this.back_amount.toFixed(2);
    },
  },
  mounted() {
     this.back_amount=0
    if(this.thatF.thatF.pay_status==3){
        this.chargeDataArry.forEach(v=>{
          if(v.status==5){
            this.back_amount=this.back_amount+ parseFloat(v.back_amount)
          }
        })
    }

    this.paymentArry = JSON.parse(JSON.stringify(this.$baseBai["payment"]));

    if (this.thatF.dialogTitle != "退费") {
      this.paymentArry.splice(4, 1);
    }
    this.tableData = JSON.parse(
      JSON.stringify(this.$baseBai["workstation"]["gh_sfmx"])
    );

    if (this.thatF.thatF.pay_status == 3 || this.thatF.thatF.pay_status == 2) {
      this.tableData.splice(10, 0, {
        prop: "back_fee_time",
        label: "退款时间",
      });
      this.tableData.splice(10, 0, {
        prop: "back_num",
        label: "退款数量",
      });
      this.tableData.splice(10, 0, {
        prop: "back_amount",
        label: "退款金额",
      });
    }
    if (this.thatF.thatF.pay_status == 2) {
      this.tableData = this.tableData.map((v) => {
        if (v.label == "应收") {
          v.label = "已收";
        }
        return {
          ...v,
        };
      });
    }
    if(this.thatF.thatF.pay_status == 1||this.thatF.dialogTitle=="明细"){
       this.paymentArry.splice(1,3)
    }

    // this.paymentArry.splice(4,1)
    this.paymentArry.forEach((v) => {
      v.price = 0;
      if (
        (this.thatF.dialogTitle == "退费" ||
          this.thatF.dialogTitle == "明细") &&
        this.thatF.chargeData.payment instanceof Array
      ) {
        this.thatF.chargeData.payment.forEach((k) => {
          if (k.payment == v.value) {
            v.price = k.money;
          }
        });
      }
    });
    console.log("paymentArry",this.paymentArry)
    this.paymentArry=this.paymentArry.map(v=>{
      if(v.value=='1'){
          v.price=this.chargeData.should_amount;
      }
      return v
    })
    console.log("this.paymentArry",this.paymentArry)
    // console.log("this.paymentArry",this.paymentArry)
    //console.log("this.chargeData",this.thatF.chargeData)
    //  console.log("id",this.chargeData)
  },

  methods: {
    checkedChange(e) {
      // back_amount
      this.subRefund = e;
    },
    checkSelectable(row) {
      return row.can_back == 1;
    },
    handleSelectionChange(val) {
      this.params.payment = val;
    },
    handleEdit() {
      this.thatF.item2[2] = 6;
      this.thatF.handleEdit(
        this.thatF.item2[0],
        this.thatF.item2[1],
        this.thatF.item2[2]
      );
    },
    changePricePay(...item) { 
      // chargeData.should_amount
     
    
      this.chargeData.collect_amount = 0;
      this.paymentArry.forEach((element1) => {
        if (element1.price) {
          this.chargeData.collect_amount = (
            parseFloat(this.chargeData.collect_amount) +
            parseFloat(element1.price)
          ).toFixed(2);
        }
      });
 
      this.chargeData.give_amount = (
        parseFloat(this.chargeData.collect_amount) -
        parseFloat(this.chargeData.should_amount)
      ).toFixed(2);

        if(parseFloat(item[1].price).toFixed(2) ==this.chargeData.should_amount){
         console.log("相等了")
        this.paymentArry=this.paymentArry.map(v=>{
              
                v.price=v.value==item[1].value?v.price:0
          return {
            ...v,

          }
        })
      }
    },
 
    tuifei(...item) {
      let d = {
        order_id: this.chargeData.id,
        back_amount: this.back_amount,
        back_items: [],
      };
      d.back_items = this.subRefund.map((v) => {
        return {
          id: v.id,
          back_num: v.num,
          back_amount: v.amount,
        };
      });
      console.log("d", d);
      if (d.back_items.length <= 0) {
        return this.$message({
          message: "请选中你要退费的选项",
          type: "warning",
        });
      }

      this.$confirm(
        "确定要对患者[" +
          this.chargeData.member.name +
          "]退费？退费金额：" +
          d.back_amount,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).then(() => {
        this["_API"].getClinic_feeFeeBack(d).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: res.message,
              type: "success",
            });
            this.thatF.thatF.params.page = 1;
            this.thatF.thatF.getClinic_feeFeeIndex();
            this.thatF.show_charge = false;
          }
        });
      });
    },
    save() {
      this.$confirm("确定对当前患者收费，请核对支付方式和金额?", "收费确认", {
        confirmButtonText: "收费",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let d = {
          amount: this.chargeData.amount,
          erase_amount: this.chargeData.erase_amount,
          collect_amount: this.chargeData.collect_amount,
          give_amount: this.chargeData.give_amount,

          id: this.chargeData.id,
        };

        d.payment = [];
        this.paymentArry.forEach((res) => {
          if (res.price) {
            d.payment.push({
              payment: res.value,
              money: res.price,
            });
          }
        });

        this["_API"].getClinic_feeFeeFeePay(d).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: res.message,
              type: "success",
            });
            // 

            this.handleEdit()
            this.thatF.thatF.params.page = 1;
            this.thatF.thatF.getClinic_feeFeeIndex();
            // this.thatF.show_charge = false;
          }
        });
      });
    },
  },
  components: {
    ViewTitle,
    //  FormInfo
  },
};
</script>
<style lang='scss' scoped>
.addUpdate {
  padding: 0 5%;

  .box1 {
    display: flex;
    flex-wrap: wrap;
    padding: 20px 0;

    > div {
      position: relative;
      width: 33%;
      display: flex;
      align-items: center;
      // justify-content: center;
      margin-bottom: 20px;

      > span {
        display: inline-block;
        width: 65px;
      }

      /deep/ .el-input {
        width: 200px;
      }
    }
  }

  .box3 {
    margin: 20px 0;
  }

  .dukaBut {
    margin: 0px 0 20px;
  }
}

/deep/ .el-dialog__body {
  height: 70vh;
  overflow: scroll;
}

// /deep/ .el-table .success-row {
//   background: #02bf6b;
// }

/deep/ .el-table .warning-row {
  background: red;
}

/deep/ .el-table .success-row {
  background: #02bf6b;
}

/deep/ .icon-add-bai {
  position: absolute;
  right: -32px;
  top: 50%;
  transform: translateY(-50%);
}
</style>
